<template>
  <div class="headTop">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头像 -->
    <el-dropdown @command='handleCommand'>
      <img :src='img' class="avator" />
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command='home'>首页</el-dropdown-item>
        <el-dropdown-item command='signout'>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import {signout} from '../api/getData'
import {baseImgPath} from '../config/env'
import {mapActions, mapState} from 'vuex'
export default {
  data() {
    return {
      img:require('../assets/default.jpg')
    };
  },
  created(){
     this.getAdminData()
  },
  mounted() {
      console.log(baseImgPath);
  },
  computed:{
    ...mapState(['adminInfo'])
  },
  methods:{
    ...mapActions(['getAdminData']),
   async handleCommand(command){
      console.log(command);
      if(command == 'home'){
        this.$router.push('/manage');
      } else if(command == 'signout') {
        const {data} = await signout()
        console.log(data);
        if(data.status == 1){
          this.$message({
            type: 'success',
            message: '退出成功'
          })
          this.$router.push('/')
        } else {
          this.$message({
            type:'error',
            message: data.message
          })
        }
      }
    }
  }
};
</script>

<style lang='less'>
@import "../style/mixin.less";
.headTop {
  height: 60px;
  background-color: #eff2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: 400;
}
.avator{
  .wh(36px,36px);
  border-radius: 50%;
  margin-right: 20px;
}
</style>